import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import FluentUI

import MyApp

FluExpander {
    contentHeight: 80
    headerHeight: 45
    headerDelegate: Component {
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 15
            anchors.rightMargin: 15
            FluRectangle {
                Layout.alignment: Qt.AlignVCenter
                height: 12
                width: 12
                radius: [6, 6, 6, 6]
                color: {
                    switch (client.status) {
                    case Types.NC: return "red"
                    case Types.CONNECTING: return "yellow"
                    case Types.CONNECTED: return "green"
                    default: return "red"
                    }
                }
            }

            FluText {
                Layout.leftMargin: 6
                text: {
                    switch (client.status) {
                    case Types.NC: return "未连接"
                    case Types.CONNECTING: return "连接中"
                    case Types.CONNECTED: return client.hostIp
                    default: return "未知状态"
                    }
                }
                font.pixelSize: 16
                // font.bold: true
            }

            Item {
                Layout.fillWidth: true
            }
        }
    }
    content: ColumnLayout {
        anchors.fill: parent
        anchors.leftMargin: 10
        anchors.rightMargin: 10
        ColumnLayout {
            RowLayout {
                FluText {
                    text: "IP："
                    font.pixelSize: 12
                }
                Item {
                    Layout.fillWidth: true
                }
                RowLayout {
                    spacing: 2 
                    FluTextBox {
                        id: ip1
                        text: "192"
                        cleanEnabled: false
                        font.pixelSize: 10
                    }
                    FluText {
                        text: "."
                    }
                    FluTextBox {
                        id: ip2
                        text: "168"
                        cleanEnabled: false
                        font.pixelSize: 10
                    }
                    FluText {
                        text: "."
                    }
                    FluTextBox {
                        id: ip3
                        text: "10"
                        cleanEnabled: false
                        font.pixelSize: 10
                    }
                    FluText {
                        text: "."
                    }
                    FluTextBox {
                        id: ip4
                        text: "135"
                        cleanEnabled: false
                        font.pixelSize: 10
                    }
                }
            }
            RowLayout {
                FluText {
                    text: "PORT："
                    font.pixelSize: 12
                }
                FluTextBox {
                    id: port
                    text: "8887"
                    cleanEnabled: false
                    font.pixelSize: 10
                }
                Item {
                    Layout.fillWidth: true
                }
                FluLoadingButton {
                    id: connect_button
                    text: client.status == Types.CONNECTED ? "断连" : "连接"
                    loading: false
                    onClicked: {
                        var ip_addr = ip1.text + "." + ip2.text + "." + ip3.text + "." + ip4.text;
                        if (client.status == Types.CONNECTED) {
                            client.disconnectFromServer();
                        } else {
                            client.connectToServer(ip_addr, port.text);
                            loading = true;
                        }
                    }
                    Connections {
                        target: client
                        function onConnectedFailed () {
                            connect_button.loading = false;
                            showError("连接失败");
                        }
                        function onConnected(){
                            connect_button.loading = false;
                            showSuccess("连接成功");
                        }
                        function onDisconnected() {
                            connect_button.loading = false;
                            showInfo("已断开连接");
                        }
                    }
                }
            }
        }
    }
}
